<template>
  <view class="sangcheng  pagebg">
    
        <!-- 头部 -->
        <view class="titleUl">
          
          <view class="titleULitiem">
              <view class="li active">
                <image src="./images/钻石项链.png" mode=""></image>
              </view>
              <text>项链</text>
          </view>
          
          <view  class="titleULitiem">
              <view class="li">
                <image src="./images/行李箱.png" mode=""></image>
              </view>
              <text>行李箱</text>
          </view>
          
          <view class="titleULitiem">
               <view class="li">
                <image src="./images/背包.png" mode=""></image>
               </view>
               <text>背包</text>
          </view>
          
          <view class="titleULitiem">
                <view class="li">
                  <image src="./images/路径_1.png" mode=""></image>
                </view>
                <text>衣服</text>
          </view>
          
          <view class="titleULitiem">
                <view class="li">
                 <image src="./images/钻石项链.png" mode=""></image>
                </view>
                <text>鞋</text>
          </view>
        </view>
        
        <!-- 推荐商品 -->
        <view class="index-sp">
                <!-- 头 -->
                <view class="index-sp-title">
                  <view class='lefttext'>推荐商品</view>
                  <view class='righttext'>更多</view>
                </view>
                <!-- 商品区域 -->
                <view class="index-content">
                  
                        <view class="index-content-item">
                          <view class="index-content-item-shopping">
                            <image src="../shangCheng/images/Women-Bag-High-Quality-PNG_(1).png" mode=""></image>
                          </view>
                          <text class="item-text">高端奢侈包</text>
                          <text class="item-money">￥120</text>
                        </view>
                  
                        <view class="index-content-item">
                          <view class="index-content-item-shopping">
                            <image src="../shangCheng/images/Women-Bag-High-Quality-PNG_(1).png" mode=""></image>
                          </view>
                          <text class="item-text">高端奢侈包</text>
                          <text class="item-money">￥120</text>
                        </view>
                        
                </view>
        </view>
          
        <!-- 最受欢迎 -->
        <view class="index-sp-bottom">
            <!-- 头 -->
            <view class="index-sp-title">
              <view class='lefttext'>最受欢迎</view>
              <view class='righttext'>更多</view>
            </view>
            <!-- 内部 -->
            <view class="box">
              
                <view class="box-item">
                  <image src="./images/黑包.png" mode=""></image>
                  <view class="box-item-text">
                    <text class="text-title">黑色男士皮包突出风采必选</text>
                    <text class="text-bottom">￥120</text>
                  </view>
                </view>
                
                <view class="box-item">
                  <image src="./images/Women-Bag-PNG-Pic.png" mode=""></image>
                  <view class="box-item-text">
                    <text class="text-title">黑色男士皮包突出风采必选</text>
                    <text class="text-bottom">￥120</text>
                  </view>
                </view>
                
            </view>
            
            
            
        </view>
  </view>   
  
  
</template>

<script setup>
</script>

<style scoped lang="scss">
  .sangcheng{
    .titleUl{
      display: flex;
      width: 100%;
      position: absolute;
      top: 10%;
      .titleULitiem{
        text{
          margin-left: 55.5rpx;
        }
        .li{
          margin-left: 38rpx;
          margin-bottom:  24.81rpx;
          width: 121rpx;
          height: 121rpx;
          border-radius: 50%;
          background: rgba(255, 255, 255, 1);
          text-align: center;
          padding: 37rpx 36rpx;
          image{
            width: 48rpx;
            height: 48rpx;
          }
        }
              .active{
                background: rgba(45, 41, 66, 1);
              }
      }
    }
    // ------------------------------------
    
    
    .index-sp{
      position: absolute;
      width: 100%;
      padding: 0 24rpx;
      top: 25%;
      margin-top: 61.93rpx;
      .index-content{
        margin-top: 43.74rpx;
        display: flex;
        justify-content: space-around;
        .index-content-item{
          padding: 35rpx 20.7rpx;
          width: 283.81rpx;
          height: 470.16rpx;
          opacity: 1;
          border-radius: 13px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 12px 51px  rgba(45, 41, 66, 0.11);
            .item-text{
              display: block;
              margin-top: 21.9rpx;
              font-size: 12rpx;
              font-weight: 400;
              margin-bottom: 26.64rpx;
            }
            .item-money{
              font-size: 36rpx;
              color: rgba(248, 58, 38, 1);
            }
            .index-content-item-shopping{
              width: 242.46rpx;
              height: 284.28rpx;
              opacity: 1;
              border-radius: 13px;
              background: rgba(241, 240, 241, 0.66);
              display: flex;
              justify-content: center;
              align-items: center;
               image{
                 width: 80%;
                 height: 80% ;
               }
            }
        }
        
        
        
      }
      .index-sp-title{
          display: flex;
          justify-content:space-between;
          width: 100%;
          .righttext{
            color: rgba(248, 58, 38, 1);
          }
      }
    }
    
    
    
    // ------------------------------------
    .index-sp-bottom{
      position: absolute;
      width: 100%;
      padding: 0 24rpx;
      top: 75%;
          .box{
            display: flex;
             .box-item{
               display: flex;
               margin-top: 43.7rpx;
               width: 296.96rpx;
               height: 190.25rpx;
               // background-color: #aaaaff;
               // display: flex;
               padding-bottom: 37rpx;
               .box-item-text{
                 margin-top: 37rpx;
                 display: flex;
                 flex-direction: column;
                 justify-content: space-around;
                 .text-title{
                   font-size: 12rpx;
                   font-weight: 700;
                 }
                 .text-bottom{
                   color: red;
                 }
               }
               image{
                 width: 129.69rpx;
                 height: 148.7rpx;
               }
               
             }
          }
        .index-sp-title{
          display: flex;
          justify-content:space-between;
          width: 100%;
          .righttext{
            color: rgba(248, 58, 38, 1);
          }
        }
    }
    
  }
</style>